<template>
    <div class="addOrEdit">
        <!-- 年份 -->
        <div class="fill-wrap">
            <div class="select-box" id="select-box">
                <div class="select-label">年份</div>
                <div class="select-value" @click="openPoup('yearShow')">
                    <div class="tips" :style="{ color: getColor('workYear') }">
                        {{ form.workYear ? form.workYear : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">业务类别</div>
                <div class="select-value" @click="openPoup('ywShow')">
                    <div class="tips" :style="{ color: getColor('businessType') }">
                        {{ form.businessType ? form.businessType : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">主要责任单位</div>
                <div class="select-value" @click="openPoup('zrShow')">
                    <div class="tips" :style="{ color: getColor('mainBusinessUnitOrgName') }">
                        {{ form.mainBusinessUnitOrgName ? form.mainBusinessUnitOrgName : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">相关责任单位</div>
                <div class="select-value" @click="openPoup('xgzrShow')">
                    <div class="tips" :style="{ color: getColor('businessUnitName') }">
                        {{ form.businessUnitName?.length > 0 ? form.businessUnitName.toString() : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">分管领导</div>
                <div class="select-value" @click="openPoup('ldShow')">
                    <div class="tips" :style="{ color: getColor('workLeader') }">
                        {{ form.workLeaderName?.length > 0 ? form.workLeaderName.toString() : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">进度状态</div>
                <div class="select-value" @click="openPoup('jhShow')">
                    <div class="tips" :style="{ color: getColor('workStatus') }">
                        {{ form.workStatus ? form.workStatus : '请选择' }}
                    </div>
                    <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">任务类别</div>
                <div class="select-value" @click="openPoup('rwShow')">
                    <div class="tips" :style="{ color: getColor('workCategory') }">
                        {{ form.workCategory?.length > 0 ? form.workCategory.toString() : '请选择' }}
                    </div> <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="select-box" id="select-box">
                <div class="select-label">任务大类</div>
                <div class="select-value" @click="openPoup('workBigShow')">
                    <div class="tips" :style="{ color: getColor('workBigType') }">
                        {{ form.workBigType ? form.workBigType : '请选择' }}
                    </div> <img src="@/assets/images/rightArrow.png" alt="">
                </div>
            </div>
            <div class="input-box">
                <div class="input-label">具体工作内容</div>
                <div class="input-fill">
                    <van-field style="background: rgba(242, 243, 245, 1)" :disabled="isPermission"
                        v-model="form.workContent" rows="2" autosize type="textarea" placeholder="请填写" />
                    <!-- <input type="text" :disabled="isPermission"  v-model="form.workContent" placeholder="请填写"> -->
                </div>
            </div>
            <div class="input-box">
                <div class="input-label">年度计划进度</div>
                <div class="input-fill">
                    <van-field style="background: rgba(242, 243, 245, 1)" :disabled="!isPermission"
                        v-model="form.annualPlan" rows="2" autosize type="textarea" placeholder="请填写" />
                    <!-- <input type="text" :disabled="!isPermission" v-model="form.annualPlan" placeholder="请填写"> -->
                    <!-- <el-input v-model="input" placeholder="请填写" /> -->
                </div>
            </div>
            <div class="input-box">
                <div class="input-label">推进完成情况</div>
                <div class="input-fill">
                    <van-field style="background: rgba(242, 243, 245, 1)" :disabled="!isPermission"
                        v-model="form.workProgress" rows="2" autosize type="textarea" placeholder="请填写" />
                    <!-- <input type="text" :disabled="!isPermission"  v-model="form.workProgress" placeholder="请填写"> -->
                    <!-- <el-input v-model="input" placeholder="请填写" /> -->
                </div>
            </div>
            <div class="input-box">
                <div class="input-label">需要说明</div>
                <div class="input-fill">
                    <van-field style="background: rgba(242, 243, 245, 1)" :disabled="!isPermission"
                        v-model="form.workStatement" rows="2" autosize type="textarea" placeholder="请填写" />
                    <!-- <input type="text" :disabled="!isPermission" v-model="form.workStatement" placeholder="请填写"> -->
                    <!-- <el-input v-model="input" placeholder="请填写" /> -->
                </div>
            </div>
            <div class="input-box">
                <div class="input-label">备注</div>
                <div class="input-fill">
                    <van-field style="background: rgba(242, 243, 245, 1)" :disabled="!isPermission"
                        v-model="form.workNote" rows="2" autosize type="textarea" placeholder="请填写" />
                    <!-- <input type="text" :disabled="!isPermission" v-model="form.workNote" placeholder="请填写"> -->
                    <!-- <el-input v-model="input" placeholder="请填写" /> -->
                </div>
            </div>
        </div>
        <div class="btn-list">
            <div class="cancel btn btnPointer" @click="router.go(-1)">取消</div>
            <div class="confirm btn btnPointer" @click="onSubmit(true)">暂存</div>
            <div class="confirm btn btnPointer" @click="onSubmit(false)">提交</div>
        </div>
    </div>
    <van-popup teleport="body" v-model:show="poupShowObj.yearShow" position="bottom">
        <van-picker title="请选择年份" :columns="yearColumns" @confirm="onYear" ref="yearRef" @cancel="yearShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.ywShow" position="bottom">
        <van-picker title="请选择业务类型" :columns="ywColumns" @confirm="onYw" ref="ywRef" @cancel="ywShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.zrShow" position="bottom">
        <van-picker title="请选择主要责任单位" :columns="zrColumns" @confirm="onZr" ref="zrRef" @cancel="zrShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.xgzrShow" position="bottom">
        <div class="multi-box">
            <div class="tool-bar">
                <van-button style="border: none; color: #969799" @click="xgzrShow = false" size="normal">取消</van-button>
                <div class="title">请选择相关单位</div>
                <van-button @click="onXgzr" style="border: none; color: #1989fa" size="normal">确认</van-button>
            </div>
            <div class="multi-radio-box">
                <van-checkbox-group v-model="form.businessUnitOrgCodes">
                    <van-cell @click="xhzrChange(item)" v-for="(item, index) in zrColumns" :key="index"
                        :title="item.text">
                        <template #right-icon>
                            <van-checkbox :name="item.value" />
                        </template>
                    </van-cell>
                </van-checkbox-group>
            </div>
        </div>
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.ldShow" position="bottom">
        <!-- <van-picker title="请选择分管领导" :columns="ldColumns" @confirm="onLd" ref="ldRef" @cancel="ldShow = false" /> -->
        <div class="multi-box">
            <div class="tool-bar">
                <van-button style="border: none; color: #969799" @click="ldShow = false" size="normal">取消</van-button>
                <div class="title">请选择分管领导</div>
                <van-button @click="onLd" style="border: none; color: #1989fa" size="normal">确认</van-button>
            </div>
            <div class="multi-radio-box">
                <van-checkbox-group v-model="form.workLeader">
                    <van-cell @click="ldChange(item)" v-for="(item, index) in ldColumns" :key="index"
                        :title="item.text">
                        <template #right-icon>
                            <van-checkbox :name="item.value" />
                        </template>
                    </van-cell>
                </van-checkbox-group>
            </div>
        </div>
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.jhShow" position="bottom">
        <van-picker title="请选择计划状态" :columns="jhColumns" @confirm="onJh" ref="jhRef" @cancel="jhShow = false" />
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.rwShow" position="bottom">
        <div class="multi-box">
            <div class="tool-bar">
                <van-button style="border: none; color: #969799" @click="rwShow = false" size="normal">取消</van-button>
                <div class="title">请选择任务类别</div>
                <van-button @click="onRw" style="border: none; color: #1989fa" size="normal">确认</van-button>
            </div>
            <!-- {{ form.workCategory }}  @change="categoryChange" -->
            <div class="multi-radio-box">
                <van-checkbox-group v-model="form.workCategory">
                    <van-cell v-for="(item, index) in rwColumns" @click="categoryChange(item)" :key="index"
                        :title="item.text">
                        <template #right-icon>
                            <van-checkbox :name="item.value" />
                        </template>
                    </van-cell>
                </van-checkbox-group>
            </div>
        </div>
    </van-popup>
    <van-popup teleport="body" v-model:show="poupShowObj.workBigShow" position="bottom">
        <van-picker title="请选择任务大类" :columns="workBigColumns" @confirm="onWorkBig" ref="workBigRef"
            @cancel="workBigShow = false" />
    </van-popup>

</template>

<script setup>
import { workAdd, draftAdd, draftUpdate, draftPage } from "@/service/yearWork"
import { isPermission } from "@/utils/permission"
import { useDict } from "@/stores/dictstore"
import { useUser } from "@/stores/user"

const dictStore = useDict()
const { orgList, userLdList } = toRefs(dictStore)
const userStore = useUser()

const router = useRouter()
const route = useRoute()
const form = reactive({
    workYear: new Date().getFullYear().toString(),
    workCategory: [],
    workLeader: [],
    businessUnitOrgCodes: []
})
const getColor = (key) => {
    // 判断权限
    if (!isPermission.value) {
        if (form[key]?.length > 0) {
            return 'rgba(51, 51, 51, 1)'
        } else {
            if (validateType.value) {
                return 'red'
            }
            return 'rgba(193, 193, 193, 1)'
        }
    } else {
        return '#c8c9cc'
    }

}

// 弹出框显示的Obj
const poupShowObj = reactive({
    yearShow: false,//年份
    ywShow: false,//业务类型
    zrShow: false,//主要责任单位
    xgzrShow: false,//相关责任单位
    ldShow: false,//分管领导
    jhShow: false,//计划状态
    rwShow: false,//任务类别
    workBigShow: false//任务大类
})
// 打开弹出框
function openPoup(fields) {
    if (isPermission.value) {
        return
    }
    poupShowObj[fields] = true
}

const yearShow = ref(false)
const yearColumns = ref([])
const yearRef = ref(null)
function onYear() {
    const { value } = yearRef.value.getSelectedOptions()[0]
    form.workYear = value
    poupShowObj.yearShow = false
}

function createYearColumn() {
    // 获取当前年份
    const currentYear = new Date().getFullYear();
    for (let i = -2; i <= 0; i++) {
        const year = currentYear + i; // 计算当前年及之前两年
        yearColumns.value.push({ text: year.toString(), value: year.toString() });
    }
}
//业务类别
const ywShow = ref(false)

const ywColumns = [{
    text: '绿化',
    value: '绿化'
},
{
    text: '林业',
    value: '林业'
},
{
    text: '环卫',
    value: '环卫'
},
{
    text: '市容景观',
    value: '市容景观'
},
{
    text: '监督',
    value: '监督'
},
{
    text: '行政审批',
    value: '行政审批'
},
{
    text: '规划',
    value: '规划'
},
{
    text: '绿化规划',
    value: '绿化规划'
},
{
    text: '计财',
    value: '计财'
},
{
    text: '中央环保督察通报问题整改',
    value: '中央环保督察通报问题整改'
},
{
    text: '其它',
    value: '其它'
}
]
const ywRef = ref(null)
const onYw = () => {
    const { value } = ywRef.value.getSelectedOptions()[0]
    form.businessType = value
    poupShowObj.ywShow = false
}
// 主要责任单位
const zrShow = ref(false)
const zrColumns = ref([])
orgList.value.forEach(item => {
    zrColumns.value.push({
        text: item.newName,
        value: item.code
    })
})
const zrRef = ref(null)
const onZr = () => {
    const { value, text } = zrRef.value.getSelectedOptions()[0]
    form.mainBusinessUnitOrgCode = value
    form.mainBusinessUnitOrgName = text
    poupShowObj.zrShow = false
}

//相关责任单位
const xgzrShow = ref(false)
const onXgzr = () => {
    let target = []
    zrColumns.value.forEach(item => {
        if (form.businessUnitOrgCodes.includes(item.value)) {
            target.push(item.text)
        }
    })
    form.businessUnitName = target
    poupShowObj.xgzrShow = false
}

function xhzrChange({ value }) {
    if (form.businessUnitOrgCodes.includes(value)) {
        let targetIndex = form.businessUnitOrgCodes.findIndex((item) => item === value)
        if (targetIndex >= 0) {
            form.businessUnitOrgCodes.splice(targetIndex, 1)
        }
    } else {
        form.businessUnitOrgCodes.push(value)
    }
}


//分管领导
const ldShow = ref(false)
const ldColumns = ref([])
userLdList.value.forEach((item) => {
    ldColumns.value.push({
        text: item.userName,
        value: item.objectid
    })
})
const onLd = () => {
    let target = []
    ldColumns.value.forEach((item) => {
        if (form.workLeader.includes(item.value)) {
            target.push(item.text)
        }
    })
    form.workLeaderName = target
    poupShowObj.ldShow = false
}
function ldChange({ value }) {
    if (form.workLeader.includes(value)) {
        let targetIndex = form.workLeader.findIndex((item) => item === value)
        if (targetIndex >= 0) {
            form.workLeader.splice(targetIndex, 1)
        }
    } else {
        form.workLeader.push(value)
    }
}
//计划进度
const jhShow = ref(false)
const jhColumns = [
    {
        text: '正常',
        value: '正常'
    },
    {
        text: '滞后',
        value: '滞后'
    },
    {
        text: '停滞',
        value: '停滞'
    },
    {
        text: '完成',
        value: '完成'
    }
]
const jhRef = ref(null)
const onJh = () => {
    const { value } = jhRef.value.getSelectedOptions()[0]
    form.workStatus = value
    poupShowObj.jhShow = false
}
//任务类别
const rwShow = ref(false)
const rwColumns = [
    {
        text: '区委、区政府重点工作',
        value: '区委、区政府重点工作'
    },
    {
        text: '区委、区政府主要领导明确任务',
        value: '区委、区政府主要领导明确任务'
    },
    {
        text: '市局年度工作',
        value: '市局年度工作'
    },
    {
        text: '其它任务',
        value: '其它任务'
    }
]
const rwRef = ref(null)
const onRw = () => {
    poupShowObj.rwShow = false
}
function categoryChange({ text }) {
    if (form.workCategory.includes(text)) {
        let targetIndex = form.workCategory.findIndex((item) => item === text)
        if (targetIndex >= 0) {
            form.workCategory.splice(targetIndex, 1)
        }
    } else {
        form.workCategory.push(text)
    }

    if (text == '其它任务') {
        form.workCategory = ['其它任务']
    } else {
        let targetIndex = form.workCategory.findIndex((item) => item === '其它任务')
        if (targetIndex >= 0) {
            form.workCategory.splice(targetIndex, 1)
        }
    }
}
// 任务大类
const workBigShow = ref(false)
const workBigColumns = [
    {
        text: '年度重点工作推进',
        value: '年度重点工作推进'
    },
    {
        text: '环保督察问题整改工作推进',
        value: '环保督察问题整改工作推进'
    },
    {
        text: '近期重要工作推进',
        value: '近期重要工作推进'
    }
]
const workBigRef = ref(null)
const onWorkBig = () => {
    const { value } = workBigRef.value.getSelectedOptions()[0]
    form.workBigType = value
    poupShowObj.workBigShow = false
}



const cgItem = ref({})
const isFirst = ref(true)
const validateType = ref(false)
const rulesFields = ['workYear', 'businessType', 'mainBusinessUnitOrgCode', 'businessUnitOrgCodes', 'workLeader', 'workStatus', 'workCategory', 'workBigType']
function onSubmit(isDraft = false) {
    // 表单验证
    const allValid = rulesFields.every(key => !(Array.isArray(form[key]) && form[key].length === 0) && Boolean(form[key]));
    // console.log("🚀 ~ onSubmit ~ allValid:", allValid)
    if (!allValid) {
        validateType.value = true
        showToast("请填写必填项");
        return
    } else {
        validateType.value = false
    }
    let params = {
        "workYear": form.workYear ?? "",
        "businessType": form.businessType ?? "",
        "mainBusinessUnitOrgCode": form.mainBusinessUnitOrgCode ?? "",
        "businessUnitOrgCodes": form.businessUnitOrgCodes?.length > 0 ? form.businessUnitOrgCodes.join(',') : "",
        "workLeader": form.workLeader?.length > 0 ? form.workLeader.join(',') : "",
        "workStatus": form.workStatus ?? "",
        "workContent": form.workContent ?? "",
        "annualPlan": form.annualPlan ?? "",
        "workProgress": form.workProgress ?? "",
        "workStatement": form.workStatement ?? "",
        "workNote": form.workNote ?? "",
        "workCategory": form.workCategory?.length > 0 ? form.workCategory.join(',') : "",
        "workBigType": form.workBigType ?? "",
        "superviseComment": form.superviseComment ?? ""
    }
    const FormType = route.query.type
    let reqParams = {
        requestType: FormType == 'edit' ? '修改' : '新增',
        // workProgressObjectId: opType.value == 'edit' ? form.objectId : '',
        changeContentBefore: FormType == 'edit' ? changeBefore.value : null,
        changeContentAfter: params,
    }
    // 主要责任单位名称
    let mainBusinessUnit = orgList.value.find(item => {
        return item.code == form.mainBusinessUnitOrgCode
    })
    reqParams.mainBusinessUnit = mainBusinessUnit.name
    // 主要责任orgCode
    reqParams.mainBusinessUnitOrgCode = mainBusinessUnit.code
    // 相关责任单位orgCode
    reqParams.businessUnitOrgCodes = form.businessUnitOrgCodes.join(',')
    // 分管领导的
    reqParams.managerLeaderIds = params.workLeader
    if (isDraft) {
        let draftParams = {
            draftContent: params
        }
        //第一次点击暂存的时候其实走的是新增接口add，弹框不关闭，然后之后的操作都是走update接口
        let reqFnc = draftAdd
        // 第二次走更新接口
        if (!isFirst.value) {
            reqFnc = draftUpdate
            // 当表单是编辑的时候才会有源数据的关联id
            draftParams.objectId = cgItem.value.objectId
        }
        // 如果是修改的情况，则就是要加上关联元数据的id
        if (FormType == 'edit') {
            draftParams.relatedWorkId = form.objectId
        }
        reqFnc(draftParams).then(res => {
            if (res.code == 0) {
                // 记录这次草稿的数据
                if (isFirst.value) {
                    cgItem.value = res.data
                }
                // ElMessage.success('暂存成功！')
                showToast("暂存成功！");
                isFirst.value = false
            }
        })
    } else {
        let draftParams = {
            pageNo: 1,
            pageSize: -1,
            deleteFlag: 0,
            applicantId: userStore.userInfo.userId,
            draftStatus: "草稿",
            objectId: cgItem.value.objectId
        }
        draftPage(draftParams).then(res => {
            if (res.code == 0) {
                if (res.data.records.length > 0) {
                    reqParams.draftObjectId = res.data.records[0].objectId
                }
                // 提交审核申请
                workAdd(reqParams).then(res => {
                    if (res.code == 0) {
                        showToast("提交审核成功，请等待审核");
                        router.go(-1)
                    } else {
                        showToast(res.msg);
                        // ElMessage.error(res.msg)
                        // emit('success')
                    }
                })
            }
        })

    }
}





const changeBefore = ref({})
onMounted(() => {
    if (route.query.type == 'edit') {
        let editData = JSON.parse(route.query.rowData)
        // 分管领导
        let ldArr = []
        ldColumns.value.forEach((item) => {
            if (editData.workLeader.includes(item.value)) {
                ldArr.push(item.text)
            }

        })
        // 分管领导的数组
        editData.workLeader = editData.workLeader.split(',')
        editData.workLeaderName = ldArr
        // 主要责任单位
        zrColumns.value.forEach((item) => {
            if (editData.mainBusinessUnitOrgCode = item.value) {
                editData.mainBusinessUnitOrgName = item.text
            }
        })
        // 相关责任单位
        let xgZrArr = []
        zrColumns.value.forEach((item) => {
            if (editData.businessUnitOrgCodes.split(',').includes(item.value)) {
                xgZrArr = item.text
            }
        })
        // 相关责任单位的数组
        editData.businessUnitOrgCodes = editData.businessUnitOrgCodes.split(',')
        editData.businessUnitName = xgZrArr

        // 任务类别
        editData.workCategory = editData.workCategory.split(',')
        Object.assign(form, editData)
        changeBefore.value = editData
    }

    createYearColumn()
})
</script>
<style>
.el-select__suffix>.el-icon {
    font-size: 22px;
}

.el-select__wrapper.is-hovering:not(.is-focused) {
    box-shadow: none;
}
</style>
<style lang="scss" scoped>
.addOrEdit {
    color: rgba(51, 51, 51, 1);
    padding: 0 26px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: calc(100vh - 92px - 10px);
    margin-top: 10px;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

    .fill-wrap {
        height: calc(100vh - 92px - 10px - 140px);
        overflow: scroll;
    }

}

.input-box {
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(239, 239, 239, 1);

    .input-label {
        font-size: 26px;
        margin: 5px 0;
        color: rgba(51, 51, 51, 1);
    }

    .input-fill {
        input {
            width: 100%;
            font-size: 28px;
            padding: 0;
            border: none;
        }

        input::placeholder {
            color: #a8abb2;
        }

    }
}


.select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(239, 239, 239, 1);

    .select-label {
        font-size: 26px;
        margin-top: 5px;
        color: rgba(51, 51, 51, 1);
    }

    .select-label::before {
        content: '*';
        color: red;
    }

    .select-value {
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 10px;
        font-size: 26px;
        color: rgba(193, 193, 193, 1);

        img {
            margin-left: 5px;
            width: 12px;
            height: 20px;
        }
    }
}

::v-deep(.el-select__wrapper) {
    font-size: 28px;
    min-width: 300px;
    border-radius: 20px;
    border: none;
    box-shadow: none;
}

::v-depp(.el-select__suffix > .el-icon) {
    font-size: 20px;
}

::v-deep(.el-select__selected-item) {
    top: 0;
    line-height: 30px;
    text-align: right;
}

.customClass1 {
    .el-select-dropdown__item {
        min-width: 100px;
        font-size: 28px;
        height: 56px;
        line-height: 56px;
    }
}

::v-deep(.el-select__placeholder.is-transparent) {
    text-align: right;
}

.base-select {
    width: auto;
    margin-top: 10px;
}


.btn-list {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 40px 0;

    .cancel {
        width: 144px;
        height: 76px;
        opacity: 1;
        border-radius: 50px;
        background: rgba(255, 255, 255, 1);
        border: 2px solid rgba(221, 221, 221, 1);
        font-size: 28px;
        color: rgba(166, 166, 166, 1);
    }

    .confirm {
        margin-left: 24px;
        width: 200px;
        height: 76px;
        border-radius: 50px;
        background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%), linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
        font-size: 28px;
        color: rgba(255, 255, 255, 1);
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.multi-box {
    .tool-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88px;
        line-height: 88px;

        .title {
            font-size: 32px;
            color: #323233;
            font-weight: bold;
        }
    }

    .multi-radio-box {
        max-height: 500px;
        overflow-y: scroll;
    }
}
</style>